<template>
  <div v-loading="isBusy" element-loading-text="加载中...">
    <!--搜索栏-->
    <div class="list-searchbar">
      <el-space direction="horizontal" :size="30">
        <el-space :size="0">
          <span>关键字：</span>
          <el-input
            clearable
            style="width: 200px"
            placeholder="权限名称/权限路径/描述"
            v-model="keyword"
          />
        </el-space>

        <el-space :size="0">
          <el-button type="primary" @click="search()">
            <el-icon class="el-icon--left">
              <Search />
            </el-icon>
            查询
          </el-button>
        </el-space>
      </el-space>
    </div>

    <!--操作栏-->
    <div class="list-toolbar">
      <el-button type="primary" @click="addClick()">
        <el-icon class="el-icon--left">
          <Plus />
        </el-icon>
        新增
      </el-button>
    </div>

    <!-- 列表 -->
    <el-table
      border
      stripe
      width="100%"
      max-height="calc(100vh - 350px)"
      header-cell-class-name="tableHeaderRow"
      :data="tableDatas"
    >
      <el-table-column header-align="center" prop="name" label="权限名称" width="300" />
      <el-table-column header-align="center" prop="authorityPath" label="权限路径" width="390" />
      <el-table-column header-align="center" prop="description" label="描述" width="380" />
      <el-table-column header-align="center" align="center" prop="addedTime" label="创建时间" width="290" />
      <el-table-column header-align="center" fixed="right" label="操作" align="center" width="300">
        <template #default="scope">
          <el-button type="primary" size="small" @click="relateRolesClick(scope)">
            <el-icon class="el-icon--left">
              <Edit />
            </el-icon>
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="removeAuthorityClick(scope)">
            <el-icon class="el-icon--left">
              <Delete />
            </el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      style="margin-top: 10px; justify-content: right"
      layout="total, sizes, prev, pager, next, jumper"
      :background="true"
      :page-sizes="[20, 40, 80, 100]"
      :total="pageCount"
      v-model:page-size="pageSize"
      v-model:current-page="pageIndex"
      @size-change="loadData"
      @current-change="loadData"
    />

    <!-- 创建权限页 -->
    <AddAuthorityView v-model:visible="addViewVisible" @closed="editClosed" />
    <!-- 修改权限页 -->
    <EditAuthorityView v-model:visible="editViewVisible" @closed="editClosed" v-model:authorityId="selectedAuthorityId" />

  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import AddAuthorityView from '@/views/authority/AddAuthorityView.vue'
import EditAuthorityView from '@/views/authority/EditAuthorityView.vue'
import type { ComponentInternalInstance } from '@vue/runtime-core'
import type { PageModel } from '@/common/model/app/page_model'
import type { AuthorityInfo } from '@/common/model/app_server/outputs/authority_info'

defineOptions({
  name: 'AuthorityIndexView',
})

//region # 属性

// 应用实例
const { proxy }: ComponentInternalInstance | null = getCurrentInstance()

// 是否繁忙
const isBusy = ref(false)

// 添加权限窗口显示状态
const addViewVisible = ref(false)

// 修改权限窗口显示状态
const editViewVisible = ref(false)

// 表格数据列表
const tableDatas = ref<Array<any>>()

// 每页条目
const pageSize = ref(20)

// 当前页码
const pageIndex = ref(1)

// 分页总数
const pageCount = ref(0)

// 关键字
const keyword = ref('')

//选中Id
const selectedAuthorityId = ref('')

//endregion

//region # 方法

// Action

/**
 * 新增权限点击事件
 * */
const addClick = function () {
  addViewVisible.value = true
}

/**
 * 修改权限点击事件
 * */
const relateRolesClick = function (row: any) {
  const authorityInfo: AuthorityInfo = row.row
  selectedAuthorityId.value = authorityInfo.id
  editViewVisible.value = true
}

/**
 * 删除
 * */
const removeAuthorityClick = async function (row: any) {
  const authorityInfo: AuthorityInfo = row.row
  ElMessageBox.confirm('是否要删除权限！', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(async () => {
    await proxy.$api.authority.removeAuthority(authorityInfo.id)
    loadData()
    proxy.$service.toast.success('删除权限成功！')
  })
}

/**
 * 编辑关闭
 * @param result - 结果
 * */
const editClosed = (result: boolean) => {
  if (result) {
    loadData()
  }
}

/**
 * 加载数据
 * */
const loadData = async () => {
  isBusy.value = true
  const authoritys: PageModel<AuthorityInfo> = await proxy.$api.authority.getAuthoritiesByPage(
    keyword.value,
    pageIndex.value,
    pageSize.value,
  )
  pageSize.value = authoritys.pageSize
  pageIndex.value = authoritys.pageIndex
  pageCount.value = authoritys.rowCount
  tableDatas.value = new Array<AuthorityInfo>()
  for (let i = 0; i < authoritys.datas.length; i++) {
    tableDatas.value.push({
      id: authoritys.datas[i].id,
      name: authoritys.datas[i].name,
      authorityPath: authoritys.datas[i].authorityPath,
      description: authoritys.datas[i].description,
      addedTime: authoritys.datas[i].addedTime,
    })
  }
  setTimeout(() => {
    isBusy.value = false
  }, 200)
}

/**
 * 查询
 * */
const search = () => {
  loadData()
}

// Private

//endregion

//region # 事件

/**
 * 加载完毕
 * */
onMounted(async () => {
  loadData()
})
//endregion
</script>

<style scoped>
@import 'IndexView.less';
</style>
